<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>WebSocket Upload Test</title>
</head>

<body>
    <h2>WebSocket Update File Test</h2>
    <p>支持多文件同时上传;上传完成，如需上传更多文件，请刷新页面。</p>
    <form id='upload_form'>
        <input type="file" id="my_file" multiple>
    </form>
    <div>
        <ul id=box></ul>
    </div>
    <div id="log"></div>
    <script src="http://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">

        var ws = new Array(), ws_uri = "ws://127.0.0.1:9090";
        var tpl = "<li><div>名称：<strong class='name'>NULL</strong> 信息：<strong class='info'>准备</strong> 进度: <strong class='tag'>0%</strong> 耗时：<strong class='time'>0 ms</strong></div></li>"
        var tag, ttag, info, fname, box = $('#box')
        var default_step = 8092;
        var upload_info = new Array()
        var files;

        function upload(i) {
            if (upload_info[i].uploaded + upload_info[i].step > upload_info[i].size) {
                upload_info[i].step = upload_info[i].size - upload_info[i].uploaded;
            }
            var buffer = files[i].slice(upload_info[i].uploaded, upload_info[i].uploaded + upload_info[i].step)

            var reader = new FileReader();
            reader.readAsArrayBuffer(buffer);

            reader.onload = function (e) {
                ws[i].send(e.target.result);
                info.eq(i).html('正在上传数据');
            }

            reader.onloadend = function (e) {
                tag.eq(i).html(upload_info[i].uploaded / upload_info[i].size * 100 + '%');
                upload_info[i].uploaded = upload_info[i].uploaded + upload_info[i].step;
            }
        }
        $('#my_file').on('change', function (event) {
            files = document.getElementById("my_file").files;
            for (var i = 0; i < files.length; ++i) {
                upload_info.push({ size: files[i].size, name: files[i].name, uploaded: 0, step: default_step, t: 0 })
                box.append(tpl)
                ws.push(new WebSocket(ws_uri))
            }
            tag = $('.tag');
            ttag = $('.time');
            info = $('.info');
            fname = $('.name');

            ws.forEach(function (item, j) {
                fname.eq(j).html(files[j].name);
                ws[j].onopen = function () {
                    info.eq(j).html('已连接上');
                    ws[j].send("name:" + upload_info[j].name);
                }

                ws[j].onclose = function () {
                    info.eq(j).html('连接已关闭');
                }

                ws[j].onmessage = function (e) {
                    if (e.data == 'start upload') {
                        info.eq(j).html('开始上传文件');
                        upload_info[j].t = new Date().getTime();
                        upload(j);

                    } else if (e.data == 'continue') {
                        if (upload_info[j].size > upload_info[j].uploaded) {
                            ttag.eq(j).html((new Date().getTime() - upload_info[j].t) + " ms");
                            upload(j);
                        } else {
                            ws[j].send('upload success');
                        }
                    } else if (e.data == 'upload success') {
                        info.eq(j).html('上传完成');
                        tag.eq(j).html(upload_info[j].uploaded / upload_info[j].size * 100 + ' %');
                        ttag.eq(j).html((new Date().getTime() - upload_info[j].t) + " ms");
                        ws[j].close();
                    }
                }
            });

        });

    </script>
</body>

</html>